<!--
 * @Description: 大屏
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-22 16:37:43
-->
<template>
  <div>
    <!-- 头部 -->
    <header class="header">大屏项目1</header>
    <!-- 体部 -->
    <div class="container">
      <div class="container-top">
        <div class="container-top-left">
          <div class="charts">
            <Box title="实时温度曲线">
              <!-- 将模板内的内容设置到Box组件中名字叫content的插槽中 -->
              <template #content>
                <Left1></Left1>
              </template>
            </Box>
          </div>
          <div class="charts">
            <Box title="设备状态分布">
              <!-- 将模板内的内容设置到Box组件中名字叫content的插槽中 -->
              <template #content>
                <Left2></Left2>
              </template>
            </Box>
          </div>
        </div>
        <div class="container-top-center">
          <Map></Map>
        </div>
        <div class="container-top-right">
          <div class="charts">
            <Box title="实时湿度曲线">
              <!-- 将模板内的内容设置到Box组件中名字叫content的插槽中 -->
              <template #content>
                <Right1></Right1>
              </template>
            </Box>
          </div>
          <div class="charts">
            <Box title="实时颗粒物曲线">
              <!-- 将模板内的内容设置到Box组件中名字叫content的插槽中 -->
              <template #content>
                <Right2></Right2>
              </template>
            </Box>
          </div>
        </div>
      </div>
      <div class="container-bottom">
        <div class="charts">
          <Box title="服务事项概览">
            <!-- 将模板内的内容设置到Box组件中名字叫content的插槽中 -->
            <template #content>
              <Bottom1></Bottom1>
            </template>
          </Box>
        </div>
        <div class="charts">
          <Box title="监测月报">
            <!-- 将模板内的内容设置到Box组件中名字叫content的插槽中 -->
            <template #content>
              <Bottom2></Bottom2>
            </template>
          </Box>
        </div>
        <div class="charts">
          <Box title="监测点信息">
            <!-- 将模板内的内容设置到Box组件中名字叫content的插槽中 -->
            <template #content>
              <Bottom3></Bottom3>
            </template>
          </Box>
        </div>
        <div class="charts">
          <Box title="监测视频">
            <!-- 将模板内的内容设置到Box组件中名字叫content的插槽中 -->
            <template #content>
              <Bottom4></Bottom4>
            </template>
          </Box>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入组件
import Box from "@/components/Box.vue";
import Bottom1 from "./components/Bottom1.vue";
import Bottom2 from "./components/Bottom2.vue";
import Bottom3 from "./components/Bottom3.vue";
import Bottom4 from "./components/Bottom4.vue";
import Left1 from "./components/Left1.vue";
import Left2 from "./components/Left2.vue";
import Map from "./components/Map.vue";
import Right1 from "./components/Right1.vue";
import Right2 from "./components/Right2.vue";
export default {
  // 注册组件
  components: {
    Box,
    Bottom1,
    Bottom2,
    Bottom3,
    Bottom4,
    Left1,
    Left2,
    Map,
    Right1,
    Right2,
  },
  data() {
    return {};
  },
  computed: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style scoped>
.charts {
  /* 1em=16px   8px */
  margin: 0 0.5em 0.5em 0.5em;
  background-image: url(../../assets/layout/chart_box_bg.png);
  background-size: 100% 100%;
  padding: 0.5em;
}

.header {
  height: 60px;
  background-image: url(../../assets/layout/header.png);
  /* 背景图片的大小 */
  background-size: 100% 200px;
  color: white;
  /* 文字水平居中 */
  text-align: center;
  /* 文字大小 */
  font-size: 28px;
}
.container {
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}
.container-top {
  flex: 2;
  display: flex;
  flex-direction: row;
}
.container-top-left,
.container-top-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* 选中直接子代 */
.container-top-left > *,
.container-top-right > * {
  flex: 1;
}

.container-top-center {
  flex: 2;
  background-image: url(../../assets/layout/chart_center_box_bg.png);
  background-size: 100% 100%;
  margin-bottom: 0.5em;
  padding: 0.5em;
}

.container-bottom {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.container-bottom > * {
  flex: 1;
}
</style>